<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单操作</title>
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../js/bootstrap-table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="../../css/common.css"/>
    <link rel="stylesheet" href="../../css/myOrder/myorder.css">
    <style>
        .border-show {
            border: 1px solid #000;
        }

        .border-right {
            border-right: 2px solid #000;
        }

        .form {
            background-color: white;
            padding-left: 20px;
            margin-top: 20px;
        }

        .type {
            padding-top: 20px;
            padding-bottom: 100px;
        }

        .data-list {
            padding-top: 20px;
        }

        .price {
            padding-left: 0px;
        }

        ul li label {
            margin-right: 20px;
        }

        .line {
            width: 10px;
            margin-top: 18px;
            border-bottom: 1px solid black;
        }

        .active {
            background-color: #FFEDDF;
            border: 1px solid #BB7B62;
            text-align: center;
        }

        .btns {
            margin-left: 10px;
            background-color: #eee;
            text-align: center;
        }

        .bottom-right {
            margin-right: 20px;
        }
        .bootstrap-table thead{
              background-color: #FFEDDF;
          }

    </style>
</head>
<body>
<div class="tab-pane fade in active body" id="operation_order">
    <form role="form " class="form">
        <div class="type">
            <div class="row ">
                <div class="col-lg-3 col-sm-3">
                <div>分类（可多选）</div>
                <div>Category (multiple choice）</div>
                </div>
            <ul>
                <li>
                    <label class="check-btn btn btn-default col-lg-2 col-sm-2">
                        类别选择</br>Category selection
                    </label>
                    <div id="triangle1"></div>
                    <div class="hidDiv" id="category">类别选择
                        <button class="yesBtn">确定</button>
                    </div>
                </li>
                <li>
                    <label class="check-btn  btn btn-default col-lg-2 col-sm-2">
                        种类选择</br>Kind of choice
                    </label>
                    <div id="triangle2"></div>
                    <div class="hidDiv" id="kindOf">种类选择
                        <button class="yesBtn">确定</button>
                    </div>
                </li>
                <li>
                    <label class="check-btn  btn btn-default col-lg-2 col-sm-2">
                        品牌选择</br>Brand choice
                    </label>
                    <div id="triangle3"></div>
                    <div class="hidDiv" id="brand">品牌选择
                        <button class="yesBtn">确定</button>
                    </div>
                </li>
            </ul>
        </div>
        <div class="row top">
            <div class="col-sm-8 col-lg-6">
                <div class="col-lg-1 col-sm-2 price">价格<br>Price</div>
                <div class="col-lg-3 col-sm-4">
                    <div class="input-group ">
                        <span class="input-group-addon">￡</span>
                        <input type="text" class="form-control">
                    </div>
                </div>
                <div class="col-lg-1 col-sm-1 line"></div>
                <div class="col-lg-3 col-sm-4">
                    <div class="input-group ">
                        <span class="input-group-addon">￡</span>
                        <input type="text" class="form-control">
                    </div>
                </div>
                <div class="col-lg-2 col-sm-4"></div>
            </div>
        </div>
            <div class="row top ">
                <div class="col-lg-1 col-sm-2"> 订单状态<br>Order</div>
                <div class="col-lg-11 col-sm-10 row">
                    <div class="col-lg-2 col-sm-2 active">
                        <div>全部</div>
                        <div>All</div>
                    </div>
                    <div class="col-lg-2 col-sm-2 btns">
                        <div>待处理</div>
                        <div>Pending</div>
                    </div>
                    <div class="col-lg-2 col-sm-2 btns">
                        <div>待发货</div>
                        <div>to be delivered</div>
                    </div>
                    <div class="col-lg-2 col-sm-2 btns">
                        <div>待确认</div>
                        <div>to be confirmed</div>
                    </div>
                    <div class="col-lg-2 col-sm-2 btns">
                        <div>待取消</div>
                        <div>To be canceled</div>
                    </div>
                </div>
            </div>
            <div class="res-btn top">
                <div class="col-lg-5 col-sm-5"></div>
                <div class="col-lg-7 col-sm-7 ">
                    <div class="row pull-right bottom-right">
                        <button class="col-sm-4 bottom-right btn-2">
                            查找Find
                        </button>
                        <button class="col-sm-4 btn-2">
                            重置Reset
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </form>
    <div class="form">
        <div class="data-list  border-bottom">
            <div class="row ">
                <div class="pull-left">
                    <div class="col-lg-10 col-sm-10">
            <div>接单</div>
            <div>Shelves</div>
                    </div>
                </div>
                <div class="col-lg-2 col-sm-3">
            <div>发货</div>
            <div>Under the shelf</div>
                </div>
                <div class="col-lg-2 col-sm-2">
            <div>批量设置</div>
            <div>Batch settings</div>
                </div>
                <div class="col-lg-2 col-sm-2">
            <div>关闭交易</div>
            <div>delete</div>
                </div>
            </div>
            <div class="bottom "></div>
        </div>
        <div class="top">
            <table class="table  table-hover table-responsive" id="operation_order_table"></table>
        </div>

    </div>
</div>

</body>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../js/common.js"></script>

<script>
    $(function () {
        getoperation_order();
        intiBnt();
    })

    /*
     * @description : 类型选择的按钮
     * @params: 
     * @author : peng huaneng
     * @date : 2018/1/19 10:07
     */
    function intiBnt() {
        $(".check-btn").on("click",function(){
            $(this).parent("li").find("div").each(function(){
                $(this).css("display","block");
            })
            $(this).parent("li").siblings("li").each(function(){
                $(this).find("div").each(function(){
                    $(this).css("display","none");
                })
            })
        })
        $(".yesBtn").on("click",function(){
            $(this).parent("div").css("display","none");
            $(this).parent("div").prev().css("display","none");
        })

        $(".select_a").on("click",function(){
            var divId = $(this).attr("click_div");
            $(".select_a_div_triangle").css("display","none");
            $(".select_a_div").css("display","none");
            $("#"+divId).css("display","block");
            $("#"+divId).prev().css("display","block");
        })
    }
    /*
     * @description : 获取订单操作
     * @params:
     * @author : peng huaneng
     * @date : 2018/1/18 10:38
     */
    function getoperation_order() {
        $('#operation_order_table').bootstrapTableEx({
            // url : '../../sys/user/list?_' + $.now(),
            height: $(window).height() - 54,
            queryParams: function (params) {
                return params;
            },
            columns: [ {
                field: 'num',
                title: '订单编号<br>Order Number',
                formatter: function (value, row, index) {
                    var html = '';
                    html = '<div class="row">' +
                        '<div class="col-lg-3 col-sm-5"><img src="' + row.url + '" style="max-width: 70px;max-height: 70px"></div>' +
                        '<div class="col-lg-9 col-sm-7 row" style="line-height: 35px" > <div class="pull-left">' + row.num + '</div></div>' +
                        '</div>';
                    return html;
                }
            }, {
                field: 'name',
                title: '收货公司名称<br>Consignee name'
            }, {
                field: 'orderTime',
                title: '下单时间<br>order time'
            }, {
                field: 'contactNum',
                title: '联系电话<br>contact number'
            }, {
                field: 'status',
                title: '订单状态<br>Order Status'
            }],
            data: [{
                "url":"../../image/myorder/food.png",
                "name": "大麦公司",
                "orderTime": "2017/11/11 15:00",
                "num": 59894574,
                "contactNum": "18256899568",
                "status": "完成"
            }]
        });
    }


</script>
</html>